<template lang="html">
  <div class="" id="">
    <h2 v-title="'预约记录'"></h2>
    <none-list :noneCollect="'当前还未预约房源，快快去预约吧~'" v-if="noneCollect"></none-list>

    <!--滑动区域-->
		<div id="mescroll" class="mescroll" v-else style="position:fixed;">
			<!--展示上拉加载的数据列表-->
      <ul class="orderListUl" id="dataList" style="margin-bottom:0;">
        <li v-for="(items,index) in pdlist" :key="items.key">
          <div class="orderTime">
            <div class="">
              <span>{{getReservationTime(index)}}</span>
              <p>{{items.address}}</p>
            </div>
            <em v-if="items.state==2">已出租</em>
            <em v-else-if="items.state==1">{{orderTime(items.reservationTime)}}</em>
            <em v-else-if="items.state==4">已转租</em>
          </div>
          <a @click="delHouse(items)">
            <div class="orderHouse">
              <!-- <img :src="items.housePic" alt="" class="houseImg"> -->
              <div class="houseImg" :style="{backgroundImage:'url(' + items.housePic + ')'}">

              </div>
              <div class="houseCon">
                <span class="title">{{items.title}}</span>
                <p class="houseAddr">
                  <img src="@/assets/images/addr@2x.png" alt="" width="10">
                  {{items.communityName}}
                </p>
                <div class="keywords mt10">
                  <span v-for="item in items.houseTagList" :key="item.key">{{item.tag}}</span>
                </div>
                <span class="title" v-if="items.rentType==1">&yen;{{(items.rentMoney/100).toFixed(2)}}元/月</span>
                <span class="title" v-else>&yen;{{(items.rentDayMoney/100).toFixed(2)}}元/晚</span>
              </div>
            </div>
          </a>
          <div class="orderBtn">
            <button type="button" name="button" class="btn" @click="getLockCode(index)">获取临时密码</button>
            <button type="button" name="button" class="inlineBtn" @click="toMap(items.lng,items.lat,items.address,items.title)">地图导航</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script src="./orderList.js"></script>

<style lang="scss" scoped src="./orderList.scss"></style>
